import React,{useState} from 'react'
import './index.css'
import Design_top from '../../components/Sfolder/design_top'
import Design_left from '../../components/Sfolder/design_left'
import Design_center from '../../components/Sfolder/design_center'
import Design_right from '../../components/Sfolder/design_right'
const index:React.FC = () => {
const [showContent, setShowContent] = useState(false);

  const handleImageClick = () => {
    // 切换显示状态
    setShowContent(index => !index);
  };
  return (
    <div className='OnlineDesign'>
      {/* 顶部排版 */}
      <div className="design_top">
        <Design_top></Design_top>
      </div>
      {/* 左侧排版 */}
      <div className="design_left">
           <Design_left  onClick={handleImageClick}></Design_left>
      </div>
      {/* 中间排版 */}
      <div className="design_center">
           <Design_center></Design_center>
           {/* <DesignCenter></DesignCenter> */}
           
      </div>
      {/* 右侧排版 */}
      <div className="design_right">
           <Design_right  showContent={showContent}></Design_right>
      </div>
    </div>
  )
}

export default index
